<template>
  <div
    class="bottom-pop-box"
    :class="[{ 'pop-active': props.modelValue }]"
    @touchmove.stop.prevent="moveHandle"
    @tap.stop="maskClick"
  >
    <div class="bottom-pop" :class="{ 'bottom-pop-active': props.modelValue }">
      <div
        class="box"
        @touchmove.stop.prevent="moveHandle"
        @tap.stop="moveHandle"
      >
        <div class="bottom-title flex">
          <span>{{ title }}</span>
          <img
            class="close-img"
            mode="scaleToFill"
            src="@/assets/icon/close.png"
            alt=""
            @click="maskClick"
          />
        </div>
        <slot></slot>
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script setup>
import { watch, computed, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    default: "",
  },
});

const emits = defineEmits(["update:modelValue"]);

onMounted(() => {
  window.addEventListener("popstate", popstateFn);
});
onBeforeUnmount(() => {
  window.removeEventListener("popstate", popstateFn);
});

function popstateFn() {
  if (props.modelValue) {
    emits("update:modelValue", false);
  }
}

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      let state = {
        title: "popopen",
        url: "#",
      };
      window.history.pushState(state, "popopen");
    } else {
      if (window.history.state?.title == "popopen") {
        window.history.back();
      }
    }
  }
);

function maskClick() {
  emits("update:modelValue", false);
}
</script>

<style scoped lang="scss">
.bottom-pop-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.25s linear;
  .bottom-pop {
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
    transition: all 0.25s linear;
    .bottom-title {
      position: relative;
      overflow: hidden;
      height: 70rpx;
      font-size: 28rpx;
      font-weight: bold;
      border-bottom: 0.5px solid #dde3e9;
      .close-img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0rpx;
        width: 30rpx;
        height: 30rpx;
        padding: 10rpx 30rpx;
        box-sizing: content-box;
        opacity: 0.6;
      }
    }
  }
  .bottom-pop-active {
    bottom: 0;
  }
}
.pop-active {
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
